<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- 载入所有的模板变量到 varTemplate 变量中 -->
    <{include file='_common/_loadVarTemplate.tpl'}>
    <script src="Resource/Script/requireJs/require.js" data-main="<{webcontrol type="LoadJsCss" isPath="true" src="Resource/Script/requireJs/_tableList.js"}>"></script>
    <style>
      body{background-color: #f5f5f5;}
      .el-dialog__body {
          padding: 0 10px 10px 10px;
      }
      .dialog-search-box-card{
        border:0px;
      }
      .el-pagination {
        margin-top: 5px;
      }
      .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
      }
      .el-table .cell {
        white-space: nowrap;
      }
      /*.el-table td, .el-table th{
        padding: 3px 3px 4px 5px;
        font-size:13px;
      }*/
      .el-dropdown-link {
        cursor: pointer;
      }
      .demo-table-expand {
        font-size: 0;
      }
      .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
      }
      .demo-table-expand .el-form-item {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        width: 33.3%;
        padding-left: 50px;
      }
      #loading-mask{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:20000;
        background-color:#fff;
      }
      #loading{
        position:absolute;
        left:47%;
        top:45%;
        padding:2px;
        z-index:20001;
        height:auto;
      }
      #loading .loading-indicator{
        background:white;
        color:#555;
        font:bold 13px tahoma,arial,helvetica;
        padding:10px;
        margin:0;
        text-align:center;
        height:auto;
        font-size:40px;
      }
      table tr td a{text-decoration: none;}
      .el-table__expanded-cell {
        z-index: 999;
        padding: 0;
      }

      .el-table__expanded-cell .expand-area-wrapper {
        padding: 20px 50px;
        overflow-x: hidden;
        border: 1px solid #dfe6ec;
      }
      .el-tab-pane {
        height:200px;
      }
      .el-table__body-wrapper, .el-table__footer-wrapper, .el-table__header-wrapper{
        width: 100%;
      }
      /*解决缩放表头错位的问题*/
      body .el-table th.gutter{
          display: table-cell!important;
      }

      body .el-table colgroup.gutter{
          display: table-cell!important;
      }
      [v-cloak] {
        display: none;
      }

      ::-webkit-scrollbar {
          width: 6px;
          height: 8px;
      }
      div::-webkit-scrollbar:hover {
          height: 8px;
          background-color: rgba(0,0,0, .25);
      }
      ::-webkit-scrollbar-thumb {
        border-radius: 1px;
        background-color: rgba(0, 0, 0, .3)
      }
      div::-webkit-scrollbar-thumb:hover {
        border-radius: 6px;
        background-color: rgba(0, 0, 0, .4)
      }
    </style>
  </head>
  <body>
    <div class="" id="div1" v-cloak>
      <comp-table
        :action="action"
        :cols="columns"
        :show-loading="showLoading"
        :row-key="rowKey"
        ref="tbl"
        @sort-change="handleSortChange"
        @select="handleUserSelect"
        @select-all="handleUserSelectAll"
        @cell-mouse-enter="handelMouseOverRow"
        @cell-mouse-leave="handelMouseLeaveRow"
        @row-click = "handleRowClick"
        @filter-change = "handleFilterChange"
        show-index
        :show-summary = "showSummary"
        @on-mount = "onTableMount"
        >

        <!-- 左上角 -->
        <template slot="leftTopSlot">
          <div style="float:left;margin-bottom:7px;">
            <!-- 高级搜索弹框 -->
            <!-- @open="colForKey={};searchDialogOpened=true;" -->
            <comp-advsearch-dialog
              ref="advSearchDialog"
              @select="handleAdvSearchOk"
              @open="searchDialogOpened=true;"
              @on-mount-items="onSearchDialogMountItems"
              :items="searchItems"
              ></comp-advsearch-dialog>
            <!-- 搜索输入框 -->
            <el-autocomplete
              :trigger-on-focus="true"
              size="small"
              placeholder="输入关键字"
              prefix-icon="el-icon-search"
              v-model="key"
              :fetch-suggestions="querySearch"
              @select="handleKeywordSelect"
              select-when-unmatched
              >
              <i
                class="el-icon-more el-input__icon"
                slot="suffix"
                @click="openAdvanceSearch">
              </i>
              <template slot-scope="{ item }">
                <span class="addr"><font color="red">{{ item.text }}</font> 包含 <font color="blue">{{key}}</font></span>
              </template>
            </el-autocomplete>
          </div>
          <!-- <el-tooltip
            placement="right"
            effect="light"
            v-if="hasAdvParams()"
            style="margin-top: 10px;margin-left: 10px;">
            <div slot="content" v-html="$refs.advSearchDialog.descAdvParams"></div>
            <i class="el-icon-info" style="color:#ccc"></i>
          </el-tooltip> -->
          <div style="float:left;margin-left:10px;margin-top:5px;color:#bbb;white-space:nowrap;" class='el-input--small'>
            <el-scrollbar style="float:left;max-width:850px;white-space:nowrap;" >
              <i class="el-icon-s-open" size="mini" v-if="searchTagsShow.length>0">检索项</i>
              <el-tag
                size="small"
                type="info"
                closable
                v-for="(tag,i) in searchTagsShow"
                @close="closeTag(tag.key)"
                :key="i">
                {{getTagText(tag)}}
              </el-tag>
            </el-scrollbar>
            <el-button type="text" size="small" @click="clearTags" style="padding:5px 5px 5px 8px;" v-if="searchTagsShow.length>0">清除</el-button>
          <div>
        </template>

        <!-- 右上角 -->
        <div v-if="buttonRightTop || menuRightTop.length>0" style="float:right;margin:0px 15px 7px 0;" slot="rightTopSlot">
          <!-- 高级功能 -->
          <el-dropdown
            @command="handleCommand"
            @click="handleCommand(buttonRightTop)"
            :split-button="true"
            size="small"
            trigger='click'>
            <span :class="`el-dropdown-link ${buttonRightTop.icon||menuRightTopIcon[0]}`"> {{buttonRightTop.text}}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item,index) in menuRightTop"
                :key="index"
                :command="item"
                :divided="item.divided"
                >
                <i :class="item.icon?item.icon:menuRightTopIcon[index+1]"> {{item.text}}</i>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <!-- 左下角 -->
        <template slot="leftBottomSlot">
          <div style="float:left;" >
            <div style="float:left;">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20,50, 100, 200]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next"
                :total="total"
                background
              ></el-pagination>
            </div>
            <!-- 分页后的文字说明 -->
            <span style="float:left;margin-top:9px;" v-html="textAfterPage"></span>
          </div>
        </template>

        <!-- 右下角 -->
        <div style="float:right;margin-top:7px;" slot="rightBottomSlot">
          <!-- <el-button-group> -->
          <el-popover
            placement="top"
            trigger="click">
            <el-progress type="line" :percentage="exportPercentag" :width="50"></el-progress>
            <el-button circle icon="el-icon-goods" size="small" @click="handleExport" slot="reference" title="导出本页"></el-button>
          </el-popover>
          <el-popover
            v-if="actionExportAll"
            placement="top"
            trigger="click">
            <el-progress type="line" :percentage="exportPercentag" :width="50"></el-progress>
            <el-button circle icon="el-icon-sold-out" size="small" @click="handleExportAll" slot="reference" title="导出全部"></el-button>
          </el-popover>
          <el-button circle icon="el-icon-refresh" size="small" @click="handleRefresh" title="刷新"></el-button>
            <!-- 可显示列 -->
          <el-popover
            placement="bottom-start"
            :visible-arrow="false"
            trigger="click">
            <div class="el-table-filter__content">
              <el-scrollbar wrap-class="el-table-filter__wrap">
                <el-checkbox-group class="el-table-filter__checkbox-group" v-model="colNamesShow">
                  <el-checkbox
                    v-for="(item,index) in columns"
                    :key="index"
                    :label='index'
                    v-if="item.text"
                    :disabled="item.showButton"
                    >{{item.text}}
                  </el-checkbox>
                </el-checkbox-group>
              </el-scrollbar>
            </div>
            <el-button slot="reference" type="plain" icon="el-icon-setting" circle size="small"></el-button>
          </el-popover>
          <!-- </el-button-group> -->
        </div>

        <!-- 表格详细展开后的效果 -->
        <template slot="expandSlot" slot-scope="props">
            <comp
              :is="optExpand.type"
              :row="props.row"
              :options="optExpand.options">
            </comp>
        </template>

        <!-- 操作栏的效果-下拉菜单或者平铺按钮 -->
        <template slot="rowButtonSlot" slot-scope="props" >
          <!-- 前三个按钮组作为默认显示的按钮 -->
          <el-button
            v-for="(btn,index) in defaultEditButtons"
            :key="index"
            type="primary"
            plain
            :icon="btn.icon?btn.icon:defaultEditButtonsIcons[index]"
            circle
            size="mini"
            style="padding:3.5px;margin-left:3px;"
            @click="handleRowCommand({btn:btn,row:props.row})"
            :title="btn.text"
            :disabled="props.row[btn.options.disabledColumn]"
            ></el-button>
          <!-- 后面的按钮以dropDown呈现 -->
          <el-dropdown
            @visible-change="showDropdown=arguments[0];showDropdownIndex=props.index;"
            size='small'
            @command="handleRowCommand"
            trigger="click"
            v-if="moreEditButtons.length>0">
            <el-button type="primary" plain icon="el-icon-more" circle size="mini" style="padding:3.5px;margin-left:3px;"></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(btn,index) in moreEditButtons"
                :key="index"
                :command="{btn:btn,row:props.row}"
                :disabled="props.row[btn.options.disabledColumn]"
                >{{btn.text}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>

      </comp-table>

      <!-- 为其他操作预留的组件位置 -->
      <!-- 比如某个订单需要在弹窗中设置备注信息 -->
      <!-- 比如在弹窗中设置某个客户的联系人等 -->
      <component
        v-for="(comp,index) in otherComps"
        key="index"
        :is="comp.type"
        :ref="comp.name"
        v-bind="comp"
        @on-mount="onOtherCompMount"
        ></component>
      <!-- 每行编辑按钮中的自定义组件 ,多个compnet标签不起作用-->
      <component
        v-for="(comp,index) in compsRowEdit"
        key="index"
        :is="comp.type"
        :ref="comp.name"
        v-bind="comp"
        @on-mount="onCompsRowEditMount(arguments[0])"
        ></component>
    </div>

  </body>
</html>